<template>
  <div class="orders">
    <el-card class="box-card">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>订单列表</el-breadcrumb-item>
      </el-breadcrumb>
      <el-row :gutter="20">
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-input
              placeholder="请输入内容"
              class="input-with-select"
              clearable
            >
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input></div
        ></el-col>
      </el-row>
      <el-table :data="orderList" stripe border style="width: 100%">
        <el-table-column type="index"> </el-table-column>
        <el-table-column label="订单id" prop="order_id"> </el-table-column>
        <el-table-column label="用户id" prop="user_id"> </el-table-column>
        <el-table-column label="订单编号" prop="order_number">
        </el-table-column>
        <el-table-column label="订单价格" prop="order_price"> </el-table-column>
        <el-table-column label="是否付款">
          <template slot-scope="scope">
            <el-tag type="danger" v-show="scope.row.order_pay == 0"
              >未付款</el-tag
            >
            <el-tag v-show="scope.row.order_pay == 1">支付宝支付</el-tag>
            <el-tag type="success" v-show="scope.row.order_pay == 2"
              >微信支付</el-tag
            >
            <el-tag type="warning" v-show="scope.row.order_pay == 3"
              >银行卡支付</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="是否发货" prop="is_send"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="修改订单"
              placement="top"
            >
              <el-button
                size="mini"
                type="primary"
                plain
                icon="el-icon-edit"
                @click="getEditOrder(scope.row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="查看详情"
              placement="top"
            >
              <el-button
                size="mini"
                type="warning"
                plain
                icon="el-icon-s-order"
                @click="queryOrder(scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 订单编辑弹框 -->
      <el-dialog :visible.sync="editShow" width="500px">
        <el-form :model="editForm" label-width="80px" ref="editOrderForm">
          <el-form-item label="订单id">
            <el-input
              v-model="editForm.id"
              disabled
              auto-complete="off"
              prop="order_id"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否发货" prop="is_send">
            <el-select
              v-model="editForm.is_send"
              placeholder="是否发货"
              width="100%"
            >
              <el-option label="未发货" value="0"></el-option>
              <el-option label="已经发货" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="支付方式">
            <el-select
              v-model="editForm.order_pay"
              placeholder="请选择支付方式"
              width="100%"
            >
              <el-option label="未支付" value="0"></el-option>
              <el-option label="支付宝" value="1"></el-option>
              <el-option label="微信" value="2"></el-option>
              <el-option label="银行卡" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单价格" prop="order_price">
            <el-input
              v-model="editForm.order_price"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="订单状态" prop="pay_status">
            <el-select
              v-model="editForm.pay_status"
              placeholder="请选择订单状态"
              width="100%"
            >
              <el-option label="未付款" value="0"></el-option>
              <el-option label="已付款" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editShow = false">取 消</el-button>
          <el-button type="primary" @click="editOrder('editOrderForm')"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <!-- 订单详情弹框 -->
      <el-dialog title="订单商品详情" :visible.sync="orderShow" width="500px">
        <div v-for="(item, index) of orderForm" :key="index">
          <el-form :model="item" label-width="80px">
            <el-form-item label="商品id">
              <el-input
                v-model="item.goods_id"
                disabled
                auto-complete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品价格">
              <el-input
                v-model="item.goods_price"
                disabled
                auto-complete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品数量">
              <el-input
                v-model="item.goods_number"
                disabled
                auto-complete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品总价">
              <el-input
                v-model="item.goods_total_price"
                disabled
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="orderShow = false">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getOrderList, editOrder, queryOrder } from "@/api/index";
export default {
  name: "",
  data() {
    return {
      // 获取
      orderList: [],
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 5
      },
      total: 0,
      // 修改
      editShow: false,
      editForm: {
        id: "",
        is_send: "",
        order_pay: 0,
        order_price: "",
        pay_status: 0
      },
      // 详情
      orderShow: false,
      orderForm: []
    };
  },
  watch: {},
  props: {},
  components: {},
  computed: {},
  mounted() {},
  methods: {
    // 获取订单列表
    async getOrderList() {
      await getOrderList(this.queryInfo).then(({ data, meta }) => {
        if (meta.status == 200) {
          this.orderList = data.goods;
          this.total = data.total;
        } else {
          this.$message.error(meta.msg);
        }
      });
    },
    // 修改订单
    getEditOrder(row) {
      this.editShow = true;
      this.editForm.id = row.order_id * 1;
      this.editForm.is_send = row.is_send == "是" ? "已经发货" : "未发货";
      this.editForm.order_pay = row.order_pay;
      this.editForm.order_price = row.order_price;
      this.editForm.pay_status = row.pay_status;
    },
    async editOrder(formName) {
      await this.$refs[formName].validate().then(res => {
        if (res) {
          editOrder(this.editForm).then(({ data, meta }) => {
            console.log(meta);
            if (meta.status == 201) {
              this.$message.success(meta.msg);
              this.editShow = false;
              this.getOrderList();
            } else {
              this.$message.error(meta.msg);
            }
          });
        }
      });
    },
    // 查看订单详情
    async queryOrder(row) {
      this.orderShow = true;
      await queryOrder(row.order_id).then(({ data }) => {
        this.orderForm = data.goods;
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryInfo.pagesize = val;
      this.getOrderList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryInfo.pagenum = val;
      this.getOrderList();
    }
  },
  filters: {},
  created() {
    this.getOrderList();
  }
};
</script>

<style scoped lang="scss">
.el-row {
  margin: 20px 0;
}
</style>
